import React, { useState,useEffect,useRef } from 'react'

import UseState from './components/UseState'
import UseEffect from './components/UseEffect'
import UseLayoutEffect from './components/UseLayoutEffect'
import UseMemo from './components/UseMemo'
import UseCallback from './components/UseCallback'
import UseRef from './components/UseRef'
import UseImperativeHandle from './components/UseImperativeHandle'
import UseReducer from './components/UseReducer'
import UseStorage from './components/UseStorage'

import Todolist from './components/todolist/Todolist'

function App(){
    // const [show,setShow] = useState(true)
    // const refObj = useRef()
    // useEffect(()=>{
    //     console.log('父组件获取子组件数据',refObj.current)
    // },[])
    return (
        <div className='p-5'>
            <h1>Hooks</h1>

            {/* <UseState/> */}
            {/* {
                show ? 
                <UseEffect/>
                :
                null
            }
            <button onClick={()=>{
                setShow(!show)
            }}>重建/销毁</button> */}

            {/* <UseLayoutEffect/> */}

            {/* <UseMemo/> */}

            {/* <UseCallback/> */}

            {/* <UseRef/> */}
            {/* <UseImperativeHandle ref={refObj}/> */}

            {/* Hooks应用 */}
            {/* <Todolist/> */}

            {/* <UseReducer/> */}
            <UseStorage/>
        </div>
        // </div>
    )
}
export default App